<template>
    <mian-layout>
        <el-descriptions labelClassName="mysdItemLable" title="商铺详情" :column="2" border>
            
            <el-descriptions-item label="店铺名称">{{oDetail.shopName}}</el-descriptions-item>
            <el-descriptions-item label="商家名称">{{oDetail.businessName}}</el-descriptions-item>
            <el-descriptions-item label="店铺指数"><el-rate v-model="oDetail.indexStar" disabled show-score></el-rate></el-descriptions-item>
            <el-descriptions-item label="交易服务费率">{{oDetail.serviceRate}}%</el-descriptions-item>

            <el-descriptions-item label="店铺简介">{{oDetail.introduction}}</el-descriptions-item>
            <el-descriptions-item label="收款币种">{{oDetail.payCurrency}}</el-descriptions-item>

            <el-descriptions-item label="店铺头图" :span="2">
                <div class="imgItemBox">
                    <a :href="oDetail.headImageUrl" target="_block"><img :src="oDetail.headImageUrl"/></a>
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="授权证照" :span="2">
                <div class="imgItemBox">
                    <a v-for="item in oDetail.credentialsImageUrls" :key="item" :href="item" target="_block"><img :src="item"/></a>
                </div>
            </el-descriptions-item>
            
        </el-descriptions>
        <br/>
        <!-- <div class="el-descriptions__header" v-if="oDetail.logisticsDeliveryStatus==1">
            <div class="el-descriptions__title">商铺的物流配置-送货</div>
            <div class="el-descriptions__extra"></div>
        </div> -->
        <el-descriptions labelClassName="mysdItemLable" title="商铺的物流配置-送货" :column="2" border>
            <el-descriptions-item label="物流费用" :span="2">
                <div>{{oDetail.deliveryExpenses==1?'免费包邮':'按区域收费:'}}</div>
                <template v-if="oDetail.deliveryExpenses==2">
                    <div class="wuqusflist" v-for="dt in oDetail.deliveryPlaces" :key="dt.countryId">
                        <label>地区</label><span>{{dt.countryName}},{{dt.cityName}}</span>
                        <label for="">费用</label><span>${{dt.logisticsAmount?dt.logisticsAmount.decimalTwoString:'0.00'}}</span>
                    </div>
                </template>
            </el-descriptions-item>
            <el-descriptions-item label="配送时间" :span="2">
                <span v-if="oDetail.deliveryDeliveryTime==1">工作日</span>
                <span v-else-if="oDetail.deliveryDeliveryTime==2">工作日+节假日（含双休日）</span>
            </el-descriptions-item>
        </el-descriptions>
        <br/>
        <el-descriptions labelClassName="mysdItemLable" title="商铺的物流配置-自提" :column="2" border>
            <el-descriptions-item label="自提点" :span="2">
                <p v-for="dt in oDetail.selfDeliverys" :key="dt.address">{{dt.address}} ({{dt.phone}})</p>
            </el-descriptions-item>
            <el-descriptions-item label="配送时间" :span="2">
                {{oDetail.selfDeliveryStartTime}} ~ {{oDetail.selfDeliveryEndTime}}
            </el-descriptions-item>
        </el-descriptions>
        
        <div class="el-descriptions__header" style="padding:30px 0 0 0">
            <div class="el-descriptions__title">商品列表</div>
            <div class="el-descriptions__extra"></div>
        </div>
        <div style="padding:0 0 30px 0">
            <goods-list :id='id'/>
        </div>

        <div style="text-align: center;">
            <my-back type="info" :reGetDataFlag="true">返回</my-back>
            <el-button type="success" plain icon="el-icon-edit" @click="goDetail">修改</el-button>
        </div>
    </mian-layout>
</template>
<script>
import {mapGetters} from "vuex"
import myTable from '@/components/public/myTable';
import myBack from '@/components/public/myBack.vue'
import goodsList from './components/goodsList.vue'
import {
  get_shop_details,
} from '@/api/collext'
export default {
    components:{
      myTable,
      myBack,
      goodsList
    },
    data(){
        return{
            arLandmarkId:'',
            oDetail:{},
            sceneNames:[],
            id:''
        }
    },
    computed:{
        ...mapGetters({
            'userInfo':'user/userInfo'
        })
    },
    created(){
        this.id = this.$route.params.id
        this.getData()
    },
    methods:{
        async getData(){ 
            const res = await get_shop_details(this.id)
            if(res.success){
                this.oDetail = res.data
                !this.oDetail.indexStar && (this.oDetail.indexStar=5)
            }
        },
        goDetail(){
            sessionStorage.setItem('details',JSON.stringify(this.oDetail))
            this.$router.push(`/shops/add?id=${this.oDetail.shopId}&onlyLook=2`)
        }
    }
}
</script>
<style lang="scss" scoped>
    .imgItemBox{
        display: flex;
        img{
            display: block;
            max-height: 100px;
            margin: 0 10px 0 0;
            max-width: 100px;
        }
    }
    .wuqusflist{
        display: flex;
        width: 100%;
        height: 36px;
        line-height: 36px;
        margin: 10px 0 0 0;
        label{
            height: 100%;
            background: #fafafa;
            width: 100px;
            padding: 0 20px;
            text-align: center;
            border: 1px solid #EBEEF5;
        }
        span{
            flex: 1;
            height: 100%;
            padding: 0 20px;
            border: 1px solid #EBEEF5;
            border-left:0 ;
        }
    }
    
</style>
<style lang="scss">
    .mysdItemLable{
        width: 150px;
    }
</style>